import React, { useState } from "react"
import { CloseOutline } from "antd-mobile-icons"
import "./PopupModel.scss"
import { Button } from "antd-mobile"
import { useDispatch, useSelector } from "react-redux"
import { toggleTab } from "../store/actions"
import { getAllChannels } from "../store/actions"
function PopupModel(props) {
  const dispatch = useDispatch()
  // 是否为编辑
  const [isEdit, setIsEdit] = useState(false)
  // 获取我的频道列表
  const channels = JSON.parse(localStorage.getItem("my_channel"))
  // 获取可选频道
  const changeChannel = useSelector((state) => state.home.channels)
  // 获取已选择的频道
  const checkedChannel = useSelector((state) => state.home.channelActiveKey)
  // 切换频道
  const changeActive = (e, id) => {
    dispatch(toggleTab(id))
    // 关闭弹出层
    props.cloneModel()
  }
  // 添加我的频道
  const addMyChannel = (key) => {
    // 将选中的频道添加到我的频道
    localStorage.setItem("my_channel", JSON.stringify([...channels, key]))
    // 重新计算可选频道
    dispatch(getAllChannels())
  }
  // 删除我的频道
  const closeTag = (e, key) => {
    // 阻止冒泡
    e.stopPropagation()

    // 在我的频道中删除
    const index = channels.findIndex((item) => item.id === key.id)
    // 判断要删除的频道是否为当前选中的频道
    if (key.id === checkedChannel && channels.length > 1) {
      // 判断删除元素前是否还有元素,有元素则自动选中前一个元素,否则自动选择后一个元素
      if (index === 0) {
        dispatch(toggleTab(channels[index + 1].id))
      } else {
        dispatch(toggleTab(channels[index - 1].id))
      }
    }
    channels.splice(index, 1)
    localStorage.setItem("my_channel", JSON.stringify(channels))
    console.log(channels)
    // // 重新计算可选频道
    dispatch(getAllChannels())
  }
  return (
    <div className="model">
      <div className="model_title">
        <span onClick={props.cloneModel}>
          <CloseOutline />
        </span>
      </div>
      <div className="myChannel">
        <div className="myChannel_title">
          我的频道：
          <span> 点击进入频道</span>
          {!isEdit ? (
            <Button
              size="mini"
              shape="rounded"
              onClick={() => {
                setIsEdit(true)
              }}
            >
              编辑
            </Button>
          ) : (
            <Button
              size="mini"
              shape="rounded"
              style={{ backgroundColor: "#fc6627", color: "#FFF" }}
              onClick={() => {
                setIsEdit(false)
              }}
            >
              完成
            </Button>
          )}
        </div>
        <div className="myChannel_tabs">
          {channels?.map((item) => {
            return (
              <div
                className={
                  checkedChannel === item.id
                    ? "channel_tab active"
                    : "channel_tab"
                }
                key={item.id}
                onClick={(e) => changeActive(e, item.id)}
              >
                {item.name}
                <span
                  className={isEdit ? "cloneTag show" : "cloneTag"}
                  onClick={(e) => closeTag(e, item)}
                >
                  <CloseOutline />
                </span>
              </div>
            )
          })}
        </div>
      </div>
      <div className="changeChannel">
        <div className="changeChannel_title">可选频道：</div>
        <div className="changeChannel_tabs">
          {changeChannel?.map((item) => {
            return (
              <div
                className="channel_tab"
                key={item.id}
                onClick={() => addMyChannel(item)}
              >
                + {item.name}
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}

export default PopupModel
